<template>
  <div class="modules">
    <div class="module mb8">
      <!-- 平台信息 -->
      <platformInfo id="platformInfo" :detail-info="detailInfo"/>
      <!-- 资源信息 -->
      <resourceInfo id="resourceInfo" :detail-info="detailInfo" v-bind="$attrs" @editModule="editModule('resourceEdit')"/>
      <!-- 创建信息 -->
      <createInfo id="createInfo" :detail-info="detailInfo"/>
    </div>
    <div class="module mb8">
      <!-- 更到账号信息 -->
      <moreAccountInfo id="moreAccountInfo" :detail-info="detailInfo" v-bind="$attrs" @editModule="editModule('moreAccountInfoEdit')"/>
    </div>
    <div class="module mb8">
      <!-- 上刊状态 -->
      <journalStatus id="journalStatus" :detail-info="detailInfo" v-bind="$attrs" :is-journal-platform="isJournalPlatform" @editModule="editModule('journalEdit')"/>
      <!-- 上刊价格 -->
      <journalInfo v-if="showModule('journal')" id="journalInfo" :detail-info="detailInfo" :is-common="isCommon" :is-red-book="isRedBook" :is-journal-platform="isJournalPlatform"/>
      <!-- 成本信息 -->
      <costInfo v-if="showModule('cost')" id="costInfo" :is-wei-bo="isWeiBo" :detail-info="detailInfo" :is-common="isCommon" :is-red-book="isRedBook"/>
      <!-- 更多价格信息 -->
      <morePriceInfo id="morePriceInfo" :detail-info="detailInfo"/>
      <!-- 更多上刊信息 -->
      <moreJournalInfo v-if="showModule('moreJournalInfo')" id="moreJournalInfo" :detail-info="detailInfo"/>
    </div>
    <div class="module mb8">
      <!-- 签约信息 -->
      <signInfo id="signInfo" :detail-info="detailInfo" v-bind="$attrs" :is-journal-platform="isJournalPlatform" style="margin-bottom: 20px;" @editModule="editModule('signInfoEdit')"/>
      <!-- 当前签约状态-->
      <statusManage id="statusManage" v-bind="$attrs" :detail-info="detailInfo" @success="freshData"/>
    </div>
    <div class="module">
      <!-- 其他信息 -->
      <otherInfo id="otherInfo" :detail-info="detailInfo" v-bind="$attrs" @editModule="editModule('otherInfoEdit')"/>
    </div>
    <!-- 编辑弹窗 -->
    <div class="edit-dialog">
      <resourceDialog ref="resourceEdit" @success="freshData"/>
      <editMoreAccount ref="moreAccountInfoEdit" @success="freshData"/>
      <editJournalInfo ref="journalEdit" @success="freshData"/>
      <editSignInfoDialog ref="signInfoEdit" @success="freshData"/>
      <editMoreOperateInfo ref="otherInfoEdit" @success="freshData"/>
    </div>

  </div>
</template>
<script>
import moreAccountInfo from './moreAccountInfo';
import costInfo from './costInfo';
import journalInfo from './journalInfo';
import moreJournalInfo from './moreJournalInfo';
import morePriceInfo from './morePriceInfo';
import otherInfo from './otherInfo';
import signInfo from './signInfo';
import statusManage from './statusManage';
import journalStatus from './journalStatus';
import resourceInfo from './resourceInfo';
import createInfo from './createInfo';
import platformInfo from './platformInfo';

// 编辑弹窗
import resourceDialog from '@/views/resource/components/resourceDialog';
import editJournalInfo from '@/views/resource/components/editJournalInfo';
import editMoreAccount from '@/views/resource/components/editMoreAccount';
import editMoreOperateInfo from '@/views/resource/components/editMoreOperateInfo';
import editSignInfoDialog from '@/views/resource/components/editSignInfoDialog';
import { isJournalPlatform } from '@/views/resource/create/resourceData';

export default {
  components: {
    moreAccountInfo,
    journalInfo,
    costInfo,
    moreJournalInfo,
    morePriceInfo,
    otherInfo,
    signInfo,
    statusManage,
    journalStatus,
    resourceInfo,
    createInfo,
    platformInfo,
    resourceDialog, editJournalInfo, editMoreAccount, editMoreOperateInfo, editSignInfoDialog
  },
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isClickScrolling: false // true手动点击Nav， false滚动页面
    };
  },
  computed: {
    idList() {
      return ['platformInfo', 'resourceInfo', 'createInfo', 'moreAccountInfo', 'journalStatus', 'journalInfo', 'costInfo', 'morePriceInfo', 'moreJournalInfo', 'signInfo', 'statusManage', 'otherInfo'];
    },
    isCommon() {
      const arr = ['小红书', '抖音', '微博', 'B站'];
      return !arr.includes(this.detailInfo.platformTypeName);
    },
    isJournalPlatform() {
      return isJournalPlatform(this.detailInfo.platformTypeName);
    },
    isRedBook() {
      return this.detailInfo.platformTypeName === '小红书';
    },
    isWeiBo() {
      return this.detailInfo.platformTypeName === '微博';
    },
    signProcessFinished() {
      return this.detailInfo.signProcessFinished || 1;
    }
  },
  mounted() {
    setTimeout(() => {
      window.addEventListener('scroll', this.handleCurrentNav);
    }, 1000);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleCurrentNav);
  },
  methods: {
    handleCurrentNav: _.debounce(function() {
      // 手动点击Nav不触发监听
      if (!this.isClickScrolling) {
        const list = this.idList.map(it => ({
          id: it
        }));
        list.forEach(it => {
          const ele = document.querySelector(`#${it.id}`);
          if (ele) {
            const eleTop = ele.getBoundingClientRect().top;
            it.top = eleTop;
          }
        });
        // 取top绝对值的最小值
        const currentNav = list.find(i => Math.abs(i.top) === Math.min(...list.filter(k => k.top).map(j => Math.abs(j.top))));
        currentNav && this.$emit('changeNav', currentNav);
      }
    }, 500),
    showModule(key) {
      switch (key) {
        case 'journal': return this.isJournalPlatform || (this.detailInfo.journalKey.dynamicKey && this.detailInfo.journalKey.dynamicKey.length) || (this.detailInfo.morePriceInfo.dynamicKey && this.detailInfo.morePriceInfo.dynamicKey.length);
        case 'cost': return !this.isCommon || (this.detailInfo.costInfoKey.dynamicKey && this.detailInfo.costInfoKey.dynamicKey.length);
        case 'moreJournalInfo': return this.isJournalPlatform || this.detailInfo.moreJournalKey.dynamicKey && this.detailInfo.moreJournalKey.dynamicKey.length;
      }
    },
    editModule(ref) {
      if (!ref) return;
      this.$refs[ref].openDialog({ data: JSON.parse(JSON.stringify(this.detailInfo)) });
    },
    freshData() {
      this.$emit('freshData');
    },
    scrollView(id) {
      if (id) {
        this.isClickScrolling = true;
        const dom = document.getElementById(id);
        dom && dom.scrollIntoView({ behavior: 'smooth' });
        setTimeout(() => {
          this.isClickScrolling = false;
        }, 1500);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.modules {
  background: #F5F5F5;
  .module {
    background: #fff;
    padding: 16px 24px 16px;
  }
  .mb8 {
    margin-bottom: 8px;
  }
  .edit-dialog {
    ::v-deep {
      .el-form-item {
        margin-bottom: 22px !important;
      }
    }
  }
}
::v-deep {
  .mt16 {
    margin-top: 16px;
  }
  .cellBg {
    background: #f9f9f9 !important;
    .cell {
      font-size: 14px !important;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: bold;
      color: #141c3d !important;
      line-height: 14px;
    }
  }
  .label-collapse {
    .el-form-item {
      .el-form-item__label {
        line-height: 1.1 !important;
      }
    }
  }
  .info-wrap{
    .dividing{
      .no-border {
        .el-form-item__content {
          border-right: none !important;
        }
      }
    }
  }
}
</style>
